AuroraHero

AuroraHero wraps the Reactbits aurora gradient with ThorAPI content awareness, pairing immersive color motion with Valkyr-styled call-to-actions.

When to Use

• Launch pages or dashboards announcing new ThorAPI bundles.
• Authenticated surfaces that need rich storytelling without bespoke layout work.
• Hero regions that should react subtly to cursor movement.

Props

Prop	Type	Description
content	ContentData	Primary record supplying title, subtitle, body copy, and author metadata.
accentColors?	[string, string, string]	Override the animated gradient palette.
focusMedia?	ContentMediaLink	Optional hero media rendered in the right column.
primaryLabel? / onPrimaryAction?	string / (content: ContentData) => void	Configure and handle the main CTA.
secondaryLabel? / onSecondaryAction?	string / (content: ContentData) => void	Optional lightweight secondary action.
interactive?	boolean	Toggle pointer-tracking when embedding inside emails or motion-reduced canvases.

Usage

import AuroraHero from "@valkyr/component-library/AuroraHero";
import { ContentData } from "@thor/model";

const spotlight: ContentData = {
  id: "aurora-spotlight",
  title: "Valkyr Aurora",
  subtitle: "Interactive hero surfaces generated from ThorAPI content",
  authorName: "Valor",
  contentData: "Drop this hero into marketing sites, dashboards, or onboarding flows to wow instantly.",
};

<AuroraHero
  content={spotlight}
  accentColors={["#60A5FA", "#C084FC", "#F472B6"]}
  primaryLabel="Book demo"
  secondaryLabel="View component library"
/>;

Pairings

• Layer inside the VelocityScrollPanel to create an animated landing page.
• Combine with MagneticFeatureCard for narrative + pricing pairings.
• Link out to the AudioPlayer doc when promoting multimedia drops.

Implementation Notes

• Aurora motion runs fully in CSS using custom properties (--aurora-x, --aurora-y).
• Pointer tracking can be disabled via interactive={false} to respect motion preferences.
• The component degrades gracefully with placeholder copy and emoji if no media is provided.